<template>
  <div class="info">
    <div class="box1">
      <div class="box1_letf">
        <img src="@/assets/images/kpi_jt1.png" alt="" />
      </div>
      <div class="box1_centre">
        <div class="box1_centre_tit">
          <div class="box1_centre_tit_c1">关键绩效指标（KPI）</div>
          <!-- <div class="box1_centre_tit_c">{{ showP }}</div> -->
        </div>
        <div class="box1_centre_c">
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">普惠性幼儿园覆盖率</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item1 }}</span>
                  <span class="text-opacity-c9-55-12"></span>
                </div>
                <div class="flex items-center">
                  <img
                    src="@/assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：95%</span>
                </div>
              </div>
            </div>
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">累计建设国家"双高计划"学校数</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item2 }}</span>
                  <span class="text-opacity-c9-55-12">所</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="@/assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：12所</span>
                </div>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">义务教育优质均衡区县个数</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item3 }}</span>
                  <span class="text-opacity-c9-55-12">个</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="@/assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：21个</span>
                </div>
              </div>
            </div>
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">累计举办中外合作办学机构和项目</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item4 }}</span>
                  <span class="text-opacity-c9-55-12">个</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="@/assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：75个</span>
                </div>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">新卓越普通高中数</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item5 }}</span>
                  <span class="text-opacity-c9-55-12">所</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="@/assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：50所</span>
                </div>
              </div>
            </div>
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">高校党建"双创"单位数</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item6 }}</span>
                  <span class="text-opacity-c9-55-12">个</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="@/assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：180个</span>
                </div>
              </div>
            </div>
          </div>
          <div class="line-col"></div>
          <div class="box1_centre_c_c">
            <div class="box1_centre_c_c_c">
              <div class="box1_centre_c_c_c_c1">累计"双一流"建设入选高校</div>
              <div class="box1_centre_c_c_c_c2">
                <div>
                  <span class="text-4b-20 mr-1">{{ showData.item7 }}</span>
                  <span class="text-opacity-c9-55-12">所</span>
                </div>
                <div class="flex items-center">
                  <img
                    src="@/assets/images/target.png"
                    class="target mr--2px"
                  />
                  <span class="text-opacity-c9-55-12">目标：≥4所</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box1_r">
        <img src="@/assets/images/kpi_jt2.png" alt="" />
      </div>
    </div>

    <div class="box2">
      <div class="box2_title">
        <div class="box2_title_tit text-gradual-blue-18">
          学校布点教育实景图
        </div>
        <div class="box2_title_btn">
          <div
            :class="{
              box2_title_btn_item: true,
              box2_title_btn_item_checked: checked_item1,
            }"
            @click="checked_item1_click"
          >
            <img src="@/assets/images/checked_item1.png" alt="" /> 市级
          </div>
          <div
            :class="{
              box2_title_btn_item: true,
              box2_title_btn_item_checked: checked_item2,
            }"
            @click="checked_item2_click"
          >
            <img src="@/assets/images/checked_item2.png" alt="" /> 区县
          </div>
          <div
            :class="{
              box2_title_btn_item: true,
              box2_title_btn_item_checked: checked_item3,
            }"
            @click="checked_item3_click"
          >
            <img src="@/assets/images/checked_item3.png" alt="" /> 学校
          </div>
        </div>
      </div>
      <div class="box2_map">
        <!-- <schoolIndex></schoolIndex>https://szjy.cqedu.cn:8081/edu-sjt/#/ -->
        <iframe
          src="https://szjy.cqedu.cn:8081/edu-sjt/#/?name=xyzz"
          width="100%"
          height="100%"
        ></iframe>
      </div>
    </div>

    <div class="box3">
      <div class="tit">
        <div class="tit_c">
          <div class="text-c9-65-12">办件量</div>
          <div class="text-gray-16 mr-1 ml-2">{{ data.length }}</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div>
        <div class="tit_c">
          <div class="text-c9-65-12">处置中</div>
          <div class="text-yellow-16 mr-1 ml-2">--</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div>
        <div class="tit_c">
          <div class="text-c9-65-12">已办理</div>
          <div class="text-green-16 mr-1 ml-2">--</div>
          <div class="text-opacity-c9-55-12">件</div>
        </div>
      </div>
      <div class="box3_c">
        <vue3-seamless-scroll
          :list="data"
          hover-stop="false"
          :step="0.3"
          hover="true"
        >
          <div class="box3_c_c" v-for="(item, index) in data" :key="index">
            <div class="text-c9-65-14 flex-1">{{ item.eventTitle }}</div>
            <div class="box3_c_c_c">
              <div class="text-opacity-c9-55-12">{{ item.happenTime }}</div>
              <div
                :class="item.state === '未办结' ? 'tag_yellow' : 'tag_green'"
              >
                <el-tag size="small">{{ item.state }}</el-tag>
              </div>

              <div class="box3_c_c_c_btn">
                <div
                  class="cursor-pointer"
                  @click="goDKdetails(item, item?.eventType || '')"
                >
                  查看
                </div>
                <div style="color: rgba(201, 233, 248, 0.6)">|</div>
                <div
                  :class="{
                    cursor_pointer: item.state === '未办结',
                    tm: item.state !== '未办结',
                  }"
                  @click="godd(item, item?.eventType || '')"
                >
                  调度
                </div>
              </div>
            </div>

            <!-- 新 -->
            <!-- <div class="box3_c_c_item text-c9-65-14">{{ item.name }}</div>
            <div class="box3_c_c_item">
              <span class="text-c9-65-12">多跨事件</span>
              <span class="text-gray-14 jj">--</span>
              <span class="text-c9-65-12">个</span>
            </div>
            <div class="box3_c_c_item">
              <span class="text-c9-65-12">办件量</span>
              <span class="text-gray-14 jj">--</span>
              <span class="text-c9-65-12">个</span>
            </div>
            <div class="box3_c_c_item">
              <span class="text-c9-65-12">处理中</span>
              <span class="text-gray-14 jj">--</span>
              <span class="text-c9-65-12">个</span>
            </div>
            <div class="box3_c_c_item">
              <span class="text-c9-65-12">已处置</span>
              <span class="text-gray-14 jj">--</span>
              <span class="text-c9-65-12">个</span>
            </div>
            <div class="box3_c_c_item box3_c_c_c_btn">
              <div class="cursor-pointer1">查看</div>
              <div style="color: rgba(201, 233, 248, 0.6)">|</div>
              <div class="cursor-pointer2">调度</div>
            </div> -->
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
    <!-- 多跨详情 -->
    <IncidentDialog_xq
      :visible="gxp11show"
      :title="'事件详情'"
      :data="xqca"
      @close="closegxp11"
    ></IncidentDialog_xq>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import schoolIndex from "./schoolIndex.vue";
import { ElMessage } from "element-plus";
import { event_details, event_info } from "@/api";
import IncidentDialog_xq from "./components/incidentDialogitem2_xq.vue";

const showP = ref("市级");

const checked_item1 = ref(true);
const checked_item2 = ref(false);
const checked_item3 = ref(false);

const checked_item1_click = () => {
  checked_item1.value = true;
  checked_item2.value = false;
  checked_item3.value = false;
};
const checked_item2_click = () => {
  checked_item1.value = false;
  checked_item2.value = true;
  checked_item3.value = false;
};
const checked_item3_click = () => {
  checked_item1.value = false;
  checked_item2.value = false;
  checked_item3.value = true;
};
const gxp11show = ref(false);
const data = ref([]);
const xqca = ref({}); //事件详情

const closegxp11 = () => {
  gxp11show.value = false;
};

const getevent_details = async () => {
  await event_details({ appCode: "" }).then(
    (res) => {
      console.log(res, "hhhh");
      if (res.code == 200) {
        data.value = res.data;
      }
    }
  );
};
const goDKdetails = (v, t) => {
  event_info({ eventType: t, eventNum: v.eventNum }).then((res) => {
    if (res.code == 200) {
      xqca.value = res.data[0] || {};
    }
  });
  gxp11show.value = true;
};

const godd = (v, t) => {
  if (v.state === "未办结") {
    event_info({ eventType: t, eventNum: v.eventNum }).then((res) => {
      if (res.code == 200) {
        // xqca.value = res.data[0] || {};
        ElMessage({
          message: `已通知-${res.data?.[0]?.orgName || ""}、${
            res.data?.[0]?.opCtyInfo?.[0]?.orgName || ""
          }、${
            res.data?.[0]?.opCtyInfo?.[0]?.opSchInfo?.[0].orgName || ""
          }-相关处置人员。`,
          type: "success",
          plain: true,
        });
      }
    });
  }
};
const showData = ref({
  item1: "94.61",
  item2: "10",
  item3: "21",
  item4: "64",
  item5: "50",
  item6: "90",
  item7: "2",
});

onMounted(() => {
  getevent_details();
});

const tableData = ref([
  {
    name: "安全稳定",
    time: "2024.04.03",
    type: "待办结",
  },
  {
    name: "行政立法",
    time: "2024.03.05",
    type: "已办结",
  },
  {
    name: "涉教舆情",
    time: "2023.11.05",
    type: "已办结",
  },
  {
    name: "网络安全",
    time: "2023.07.01",
    type: "已办结",
  },
  {
    name: "校外监管",
    time: "2024.08.12",
    type: "已办结",
  },
]);
</script>

<style lang="less" scoped>
@import "./index.less";
.cursor_pointer {
  cursor: pointer;
}
.tm {
  opacity: 0;
}
.jj {
  margin-left: 8px;
  margin-right: 8px;
}
.box3_c_c_c_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: #4bfff5;
  font-family: "Alibaba PuHuiTi 2.0-65 Medium";
}
</style>
